<template>
  <div class>
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="法友问答" />
    <div class="answer" :style="answerStyle">
      <div class="header">
        <div class="title">{{dataList.problem}}</div>
        <div class="hybrid">
          <div class="categroy">{{dataList.main_title}}</div>
          <div class="time">{{dataList.createtime}}</div>
        </div>
      </div>
      <div class="main">
        <div class="item" v-for="(item, index) in dataList.reply" :key="index">
          <div class="flex-box">
            <div class="avatar">
              <image class="avatar-img" :src="item.reply_avatar" mode="widthFix" />
            </div>
            <div class="between-box">
              <div class="info">
                <div class="name">{{item.reply_realname}}</div>
                <div class="answer-time">{{item.adopt_createtime}} 回复</div>
              </div>
              <navigator :url="'/pages/lawer/detail?id='+ item.reply_id" class="zixun">咨询我</navigator>
            </div>
          </div>
          <div class="answer-content">{{item.answer}}</div>
        </div>
      </div>
      <div class="popup">
        <view class="close-text">一分钟提问，获取专业解答</view>
        <navigator url="/pageIndex/menu/questionConsulting?type=1&serve=0" class="login-btn">在线问律师</navigator>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: {},
    };
  },
  computed: {
    answerStyle(){
      return `min-height: calc(100vh - ${this.$store.state.navbarHeight}px);`
    }
  },
  methods: {
    login(msg) {
      uni.showModal({
        title: "提示",
        content: msg,
        success: function(res) {
          if (res.confirm) {
            uni.switchTab({
              url: "/pages/my/my"
            });
          } else if (res.cancel) {
            uni.navigateBack({
              delta: 1
            });
          }
        }
      });
    }
  },
  async onLoad(e) {
    let that = this;
    let id = e.id;
    let res = await this.$gh
      .request("member.index", {
        data: {
          op: "getOrderDetailed",
          orderid: id
        }
      })
      .catch(err => {
        if (err.code == 41009) {
          that.login(err.message);
        }
      });
    this.dataList = res.data.list;
    this.$print(this.dataList);
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.answer {
  position: relative;
  padding: 35rpx 20rpx;
  // min-height: 100vh;
  box-sizing: border-box;
  .header {
    .title {
      font-size: 36rpx;
      color: @deep-color;
      margin-bottom: 30rpx;
    }

    .hybrid {
      .flex();
      font-size: 26rpx;
      color: @font-color;
      .categroy {
        padding-right: 40rpx;
        &::after {
          content: "";
          display: inline-block;
          height: 20rpx;
          width: 2rpx;
          margin-left: 40rpx;
          background-color: @font-color;
        }
      }

      .time {
        // padding-left: 40rpx;
      }
    }
  }

  .main {
    .item {
      margin-top: 25rpx;
      padding-top: 25rpx;
      border-top: 1px solid #eee;
      .flex-box {
        .flex();
        .avatar {
          .avatar-img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
          }
        }

        .between-box {
          flex: 1;
          .gh-between();
          margin-left: 15rpx;
          .info {
            .name {
              font-size: 30rpx;
              color: @deep-color;
              margin-bottom: 15rpx;
            }

            .answer-time {
              font-size: 26rpx;
              color: @font-color;
            }
          }

          .zixun {
            padding: 12rpx 25rpx;
            border-radius: 35rpx;
            background-color: @theme-color;
            font-size: 30rpx;
            color: #fff;
          }
        }
      }

      .answer-content {
        font-size: 30rpx;
        color: @deep-color;
        padding-top: 25rpx;
      }
    }
  }
  .popup {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 750rpx;
    height: 230rpx;
    background-color: #fff;
    text-align: center;
    padding-top: 30rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    box-sizing: border-box;
    .login-btn {
      .gh-center();
      width: 80%;
      height: 80rpx;
      margin: 0rpx auto 25rpx;
      color: #fff;
      background-color: @theme-color;
      border-radius: 40rpx;
      font-size: 36rpx;
    }
    .close-text {
      font-size: 30rpx;
      color: @deep-color;
      margin-bottom: 35rpx;
    }
  }
}
</style>